<template>
    <div>
        <!--轮播图区域-->
       <!-- <mt-swipe :auto="4000">
            &lt;!&ndash;在组件中使用v-for循环的话，一定要使用key&ndash;&gt;
            <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
                <img :src="item.img" alt="">
            </mt-swipe-item>
        </mt-swipe>-->

        <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>


        <!--九宫格到六宫格的改造-->

        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <!--改造成路由的方式就是：将a链接改为router-link,而且href改为
                  href="#"改为to="/home/newslist"
                -->
                <router-link to="/home/newslist">
                <!--<span class="mui-icon mui-icon-home"></span>-->
                <img src="" alt="">
                <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
              <!--  <span class="mui-icon mui-icon-email">
                    <span class="mui-badge">5</span></span>-->
                <img src="" alt="">
                <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
               <!-- <span class="mui-icon mui-icon-chatbubble"></span>-->
                <img src="" alt="">
                <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
               <!-- <span class="mui-icon mui-icon-location"></span>-->
                <img src="" alt="">
                <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <!--<span class="mui-icon mui-icon-search"></span>-->
                <img src="" alt="">
                <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <!--<span class="mui-icon mui-icon-phone"></span>-->
                <img src="" alt="">
                <div class="mui-media-body">联系我们</div></a></li>
        </ul>

    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import swiper from '../subcomponents/swiper.vue'
    export default {
        data(){
            return{
                lunbotuList:[] //保存轮播图的数组
            }
        },
        created(){
            this.getLunbotu();
        },
        methods:{
            getLunbotu(){
                //获取轮播图数据的方法
                this.$http.get('api/getlunbo').then(result => {
                    if(result.body.status === 0){
                        //成功了
                       this.lunbotuList = result.body.message;
                    }else{
                        //失败
                        Toast('加载轮播图失败')
                    }
                })
            }
        },
        components:{
            swiper
        }
    }
</script>

<style lang="scss" scoped>
.mint-swipe{
    height: 200px;
    .mint-swipe-item{
       &:nth-child(1){
           background-color: red;
       }
        &:nth-child(2){
            background-color: cyan;
        }
        &:nth-child(3){
            background-color: blue;
        }

        img{
            width: 100%;
            height: 100%;
        }
    }
}
    
    .mui-grid-view .mui-grid-9{
        background-color: #fff;
        border:none;
        img{
            width: 60px;
            height: 60px;
        }
        .mui-media-body{
            font-size:13px;
        }

    }
    .mui-grid-view .mui-grid-9 .mui-table-view-cell{
        border:0;
    }
</style>